<!--
 * @Author: your name
 * @Date: 2021-11-04 14:57:29
 * @LastEditTime: 2021-11-04 17:22:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \star-cat-h5\src\views\artist\add\components\Selectdepartment.vue
-->
<template>
  <div class="select_department">
    <van-sticky>
      <van-search
        v-model="value"
        shape="round"
        background="#ffffff"
        placeholder="请输入关键词"
        class="search_box"
      >
      </van-search>
    </van-sticky>

    <div class="content_box">
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div
          class="item"
          v-for="item in list"
          :key="item"
          @click="$router.push('/select_personnel')"
        >
          <div class="left">
            <span class="img">图标</span><span>部门名称</span>
          </div>
          <div class="right">图标</div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    clickDepartment(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.content_box {
  margin-top: 8px;
}
.select_department {
  background-color: #f8f8fb;
  min-height: 100vh;
}
.item {
  height: 32px;
  background-color: #fff;
  padding: 11px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item:hover {
  background-color: #f8f8fb;
}
.item .left {
  display: flex;
  align-items: center;

  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #110b32;
}
.item .left .img {
  height: 44px;
  width: 44px;
  margin-right: 8px;

  display: inline-block;
  background-color: #ccc;
}
</style>